<template>
  <div class="bigBox">
    <div class="loginBox">
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
        <img src="./op.png" alt />
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入用户名" >
            <i slot="prefix" class="iconfont iconzhanghaoxinxi"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入密码">
            <i slot="prefix" class="iconfont iconpassword"></i>
          </el-input>
        </el-form-item>
        <el-form-item style="text-align:left;" prop="xieyi">
          <el-checkbox v-model="loginForm.xieyi" style="margin-right:20px;"></el-checkbox>
          <span>是否无条件遵守我方约定</span>
        </el-form-item>
        <el-form-item>
          <el-button style="width:100%" type="primary" @click="login()" :loading="isAct" :disabled="isAct">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import '@/assets/js/gt.js'
import '@/assets/font/iconfont.css'
export default {
  data () {
    var checkXie = (rule, value, callback) => {
      value ? callback() : callback(new Error('请无条件遵守约定'))
    }
    return {
      isAct: false,
      catObj: null,
      loginForm: {
        mobile: '13911111111',
        code: '246810',
        xieyi: true
      },
      loginRules: {
        mobile: [
          { required: true, message: '请填写用户名' },
          { pattern: /^1[35789]\d{9}$/, message: '请正确填写格式' }
        ],
        code: [
          { required: true, message: '请填写密码' }
        ],
        xieyi: [
          { validator: checkXie }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$refs.loginFormRef.validate(valid => {
      // 表单域校验成功
        if (valid) {
          if (this.catObj !== null) {
            return this.catObj.verify()
          }
          this.isAct = true
          let pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then(res => {
              // console.log(res)
              let { data } = res.data
              window.initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                lang: 'ja',
                product: 'bind'
              }, captchaObj => {
                captchaObj.onReady(() => {
                  this.catObj = captchaObj
                  this.isAct = false
                  captchaObj.verify() // 显示验证码
                }).onSuccess(() => {
                  this.loginAct()
                }).onError(() => {

                })
              })
            })
            .catch(err => {
              return this.$message.error('获取极验秘钥失败~' + err)
            })
        }
      })
    },
    loginAct () {
      // 账号真实性校验
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 进入后台系统
            // 记录用户信息
            window.sessionStorage.setItem('userinfo', JSON.stringify(result.data.data))
            this.$router.push('/home')
          }
        })
        .catch(err => {
          return this.$message.error('用户名或密码错误' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.bigBox {
  background-image: url("./器物 (1).jpg");
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginBox {
    width: 400px;
    height: 300px;
    border-radius: 30px;
    background-color: #fff;
    opacity: 0.8;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    .el-form {
      width: 75%;
    }
    img {
      width: 40%;
      // opacity: .9;
      margin: 10px auto;
    }
  }
}
</style>
